<script setup>
import { watch, ref } from 'vue'

const count = ref(0)
const nickName = ref('张三')

const changeCount = () => {
  count.value++
}

const changeNickName = () => {
  nickName.value = '李四'
}

// 监视单个数据变化 watch (ref对象，(newValue，oldValue) => {...})
watch(count,(newValue, oldValue) => {
  console.log('新值：', newValue, ' 旧值：',oldValue)
})

// 监视多个数据变化 watch ([ref对象1， ref对象2], (newArray， oldArray) => {...})
watch([count,nickName],(newArray,oldArray) => {
  console.log(newArray,oldArray)
})

// immediate 立刻执行
watch([count,nickName],(newArray,oldArray) => {
  console.log(newArray,oldArray)
},{
  immediate:true
})

// deep深度监视
const userInfo = ref({
  name: '张三',
  age: 21
})

const changeUserInfo = () => {
  userInfo.value.age++
}

watch(userInfo, (newValue) => {
  console.log(newValue)
},{
  deep: true
})

// 对对象中的属性进行监听
watch(() => userInfo.value.age, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
</script>

<template>
  <div>{{ count }}</div>
  <div>{{ nickName }}</div>
  <button @click="changeCount">点击修改Count</button>
  <button @click="changeNickName">点击修改NickName</button>
  <hr>
  <div>{{ userInfo }}</div>
  <button @click="changeUserInfo">修改UserInfo</button>
</template>

<style scoped>

</style>